<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 创建有宽和高的盒子 -->
  <div style="width: 600px; height: 400px;"></div>
  <!-- 引入 echarts  -->
  <script src="./lib/echarts.min.js"></script>
  <!-- js代码部分 -->
  <script>
    //1. 初始化 echarts 写法固定
    // let 变量 = echarts.init（盒子）
    let mychat = echarts.init(document.querySelector('div'))
    // 2.配置 echarts 图表 （配置项决定了图表的样子）
    // let 配置项 = {}
    let option = {
      // 标题配置
      title: {
        text: '我的第一个图表',
        left: 'center',
        textStyle: {
          color: 'red',
          fontSize: 24
        }
      },
      // x 轴配置
      xAxis: {
        type: 'category',
        //和文字相关的都叫label 刻度在文档中叫 tick 轴线叫line
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
        axisLabel: {
          color: 'blue'
        }
      },
      // y 轴配置
      yAxis: {
        type: 'value'
      },
      // 下面是构成图表的必须得配置，叫做系列数据
      series: [
        // 数组中的每一个对象 都是一个图形
        {
          // data 构成图表的数据
          data: [150, 230, 224, 218, 135, 147, 260],
          // type 表示图标的类型: (line 折线) (bar 柱状图) (pie 饼状图) (map 地图)
          type: 'line',
          name:'营业额'
        },
        {
          data: [250, 210, 180, 134, 220, 290, 110],
          type: 'line',
          name:'销售额'
        },
        {
          data: [250, 210, 180, 134, 220, 290, 110],
          type: 'bar',
          barWidth: '30%', //控制柱子的宽度
          name:'利润'
        }
      ],
      // 颜色配置
      color: ['red', 'green', {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: 'red' // 0% 处的颜色
        }, {
          offset: 0.5, color: 'yellow' // 100% 处的颜色
        },
        {
          offset: 1, color: 'green' // 50% 处的颜色
        }
        ],
        global: false // 缺省为 false
      }],
      // 网格配置 坐标轴区域
      grid: {
        top: 100 // 调整坐标轴区域位置
      },
      // 图例（用于表达 每个图形的意义）
      // 需要 series中，每项目数据必须定义 name 名字
      legend:{
        top:60
      },
      tooltip:{
        // 提示的触发方式
        // 默认是 item，鼠标放到每一项上才能提示
        // 可选 axis ，鼠标放到轴上即可提示
      }
    }

    // 3.根据配置项，创建图表写法固定
    mychat.setOption(option) //setOption 这个O 是大写
  </script>
</body>

</html>